'use client'

import React from 'react'
import { UniverProvider } from '@/components/univer/UniverProvider'
import { UniverPluginToolbar } from '@/components/sheet/UniverPluginToolbar'

export default function TestPluginPage() {
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="container mx-auto px-4 py-8">
        <div className="max-w-6xl mx-auto">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-8">
            Univer 插件功能测试
          </h1>

          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
              插件功能说明
            </h2>
            <div className="space-y-2 text-gray-700 dark:text-gray-300">
              <p>• 这个页面使用基于Univer官方文档的插件系统</p>
              <p>• 插件直接在Univer工具栏中注册按钮</p>
              <p>• 支持CSV和Excel的导入导出功能</p>
              <p>• 使用Univer的命令系统，支持撤销/重做</p>
              <p>• 插件会自动调整工作表大小以适应数据</p>
            </div>
          </div>

          <UniverProvider containerId="plugin-test-container">
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
              <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                插件工具栏
              </h2>
              <UniverPluginToolbar />
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
              <h2 className="text-xl font-semibold text-gray-900 dark:text-white p-6 pb-0">
                Univer 表格
              </h2>
              <div className="p-6 pt-4">
                <div className="w-full h-96 border border-gray-200 dark:border-gray-600 rounded-lg">
                  {/* Univer 表格将在这里渲染 */}
                </div>
              </div>
            </div>
          </UniverProvider>
        </div>
      </div>
    </div>
  )
}
